<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 500px;
            border: 5px solid black;
            margin: 100px auto;
            position: relative;
        }

        .box .ele {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="ele"></div>
    </div>
</body>
<script>
    // var div = document.querySelector('div');
    // //绑定鼠标事件
    // div.onmousedown = function (e) {
    //     e = e = e || window.event;
    //     //获取鼠标在div中的坐标
    //     var relative_x = e.offsetX,
    //         relative_y = e.offsetY;
    //     document.onmousemove = function (e) {
    //         //获取事件对象
    //         e = e || window.event;
    //         //获取鼠标在页面上的坐标
    //         var absolute_x = e.pageX,
    //             absolute_y = e.pageY;
    //         //计算元素移动的距离
    //         var move_x = absolute_x - relative_x,
    //             move_y = absolute_y - relative_y;
    //         //判断边界
    //         if(move_x <= 0){
    //             move_x = 0;
    //         }else if(move_x >= document.documentElement.clientWidth - div.offsetWidth){
    //             move_x = document.documentElement.clientWidth - div.offsetWidth;
    //         }
    //         if(move_y <= 0){
    //             move_y = 0;
    //         }else if(move_y >= document.documentElement.clientHeight - div.clientHeight){
    //             move_y = document.documentElement.clientHeight - div.clientHeight;
    //         }
    //         div.style.left = move_x + 'px';
    //         div.style.top = move_y + 'px';
    //     }
    // }
    // document.onmouseup = function(){
    //     document.onmousemove = null;
    // }
    var box = document.querySelector('.box'),
        ele = document.querySelector('.ele');
    ele.onmousedown = function (e) {
        var e = e || window.event;
        //获取鼠标在元素内的坐标
        var in_x = e.offsetX,
            in_y = e.offsetY;
        var box_x = box.offsetLeft,
            box_y = box.offsetTop;
        document.onmousemove = function (e) {
            var e = e || window.event;
            //获取鼠标在网页中的坐标
            var all_x = e.pageX,
                all_y = e.pageY;
            //计算ele在box中的移动距离
            var out_x = all_x - box_x - in_x,
                out_y = all_y - box_y - in_y;
            if (out_x < 0) {
                out_x = 0;
            } else if (out_x >= box.clientWidth - ele.offsetWidth) {
                out_x = box.clientWidth - ele.offsetWidth;
            }
            if (out_y < 0) {
                out_y = 0;
            } else if (out_y >= box.clientHeight - ele.offsetHeight) {
                out_y = box.clientHeight - ele.offsetHeight
            }
            ele.style.left = out_x + 'px';
            ele.style.top = out_y + 'px';
        }
    }
    document.onmouseup = function () {
        // 去掉 move 事件  给 mousemove 事件重新赋值
        document.onmousemove = null
    }
</script>

</html>